import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Row, Col, Input, Layout, Carousel, Icon, Popover, List, Avatar } from 'antd';
import styles from './home.css';
import CommdityList from '../components/CommdityList';

const { Footer, Content } = Layout;
const search = Input.Search;
const Search = search;

const carousel = [
  {
    key: 1,
    src: './src/assets/2.jpg',
    alt: '',
  },
  {
    key: 2,
    src: './src/assets/5.jpg',
    alt: '',
  },
  {
    key: 3,
    src: './src/assets/6.jpg',
    alt: '',
  },
  {
    key: 4,
    src: './src/assets/7.jpg',
    alt: '',
  },
  {
    key: 5,
    src: './src/assets/7.png',
    alt: '',
  },
  {
    key: 6,
    src: './src/assets/8.jpg',
    alt: '',
  },
  {
    key: 7,
    src: './src/assets/8.png',
    alt: '',
  },
  {
    key: 8,
    src: './src/assets/6.jpg',
    alt: '',
  },
];

const data = [
  {
    title: '闲置数码',
    des: ' 手机 相机 笔记本 ',
    icon: './src/assets/logo/camera.png',
  },
  {
    title: '闲置母婴',
    des: ' 童装 用品 玩具 ',
    icon: './src/assets/logo/feeder.png',
  },
  {
    title: '影音家电',
    des: ' 电视 音响 料理机 ',
    icon: './src/assets/logo/tv.png',
  },
  {
    title: ' 鞋服配饰',
    des: ' 女装 箱包 配饰 ',
    icon: './src/assets/logo/clothes.png',
  },
];

class Home extends React.Component {
  state = {
    visible: false,
    isLogin: false,
  }

  componentDidMount() {
    const isLogin = this.props.location.query ? this.props.location.query.hasLogin : false;
    this.newMethod(isLogin);
  }
  turnToLogin = () => {
    this.props.dispatch(routerRedux.push('userlogin'));
  }
  turnToRegister = () => {
    this.props.dispatch(routerRedux.push('register'));
  }
  handleVisibleChange = (visible) => {
    this.setState({ visible });
  }
  returnToHomePage = () => {
    this.props.dispatch(routerRedux.push('/basiclayout/commodity'));
  }
  logout = () => {
    this.setState({
      isLogin: false,
    });
  }
  isLogin = () => {
    if (this.state.isLogin) {
      return (
        <Popover
          placement="rightBottom"
          content={
            <div>
              <div>
                <a onClick={this.returnToHomePage}>进入后台</a>
              </div>
              <div>
                <a onClick={this.logout}>退出登录</a>
              </div>
            </div>}
          trigger="click"
          visible={this.state.visible}
          onVisibleChange={this.handleVisibleChange}
        >
          <Icon type="smile-o" style={{ fontSize: 32 }} />
        </Popover>
      );
    } else {
      return (
        <div>
          <a onClick={this.turnToLogin} style={{ color: 'white' }}>登录</a> |
          <a onClick={this.turnToRegister} style={{ color: 'white' }}>注册</a>
        </div>

      );
    }
  }
  newMethod(isLogin) {
    this.setState({
      isLogin,
    });
  }

  render() {
    // console.log(this.props);
    return (
      <div>
        <Layout className={styles.layout}>
          <div className={styles.header}>
            <Row type="flex" justify="space-between" align="middle">
              <Col span={4}>
                <span>Goods Exchange System</span>
              </Col>
              <Col span={12}>
                <Search
                  placeholder="请输入关键词"
                  onSearch={value => value}
                  style={{ width: 360 }}
                  enterButton="搜索"
                />
              </Col>
              <Col span={8} push={1}>
                {
                  this.isLogin()
                }
              </Col>
            </Row>
          </div>
          <Content>
            <div className={styles.contentRow1}>
              <Row type="flex" justify="space-between" align="middle" style={{ marginBottom: 20 }}>
                <Col span={1} />
                <Col span={3}>
                  <List
                    itemLayout="horizontal"
                    dataSource={data}
                    renderItem={item => (
                      <List.Item>
                        <List.Item.Meta
                          avatar={<Avatar src={item.icon} />}
                          title={<a href="https://2.taobao.com/">{item.title}</a>}
                          description={item.des}
                        />
                      </List.Item>)}
                  />
                </Col>
                <Col span={1} />
                <Col span={17}>
                  <Carousel autoplay className={styles.carousel}>
                    {
                      carousel.map((img) => {
                        return (
                          <img key={img.key} className={styles.img} src={img.src} alt={img.alt} />
                        );
                      })
                    }
                  </Carousel>
                </Col>
                <Col span={1} />
              </Row>
            </div>
            <Row type="flex" justify="start" align="middle">
              <Col span={2} />
              <Col span={20}>
                <CommdityList />
              </Col>
              <Col span={2} />
            </Row>
          </Content>
          <Footer className={styles.footer}>@西南科技大学计算机1502第18组</Footer>
        </Layout>
      </div>
    );
  }
}

export default connect(({ indexpage }) => ({
  indexpage,
}))(Home);

